<template>
    <div class="keyboard" :style="{width:status==2?'48%':'552px'}" v-show="showKeyboard" v-clickoutside="closeModal">
      <p v-for="keys in keyList">
        <template v-for="key in keys">
          <i v-if="key === 'top'" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-duanla tab-top"></i>
          <i v-else-if="key === '123'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-num">123</i>
          <i v-else-if="key === 'del'" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-guanbi key-delete"></i>
          <i v-else-if="key === 'blank'" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i>
          <i v-else-if="key === 'symbol'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-symbol">符</i>
          <i v-else-if="key === 'point'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-point">·</i>
          <i v-else-if="key === 'enter'" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-huiche tab-enter"></i>
          <i v-else-if="key === 'abc'" @click.stop="clickKey" @touchend.stop="clickKey" class="toggle-letters">abc</i>
          <i v-else @click.stop="clickKey" @touchend.stop="clickKey">{{key}}</i>
        </template>
      </p>
    </div>
  </template>
  
  <script>
  import clickoutside from './clickoutside.js'
  
  export default {
    directives: { clickoutside },
    data() {
      return {
        keyList: [],
        status: 2,//0 小写 1 大写 2 数字 3 符号
        lowercase: [
          ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
          ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
          ['top', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'del'],
          ['123', 'point', 'blank', 'symbol', 'enter']
        ],
        uppercase: [
          ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
          ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
          ['top', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del'],
          ['123', 'point', 'blank', 'symbol', 'enter']
        ],
        num :[
            [7,8,9],
            [4,5,6],
            [1,2,3],
            ['abc',0,'.','del']
        ],
        equip:!!navigator.userAgent.toLocaleLowerCase().match(/ipad|mobile/i)//是否是移动设备
      }
    },
    props: {
      option: {
        type: Object
      }
    },
    computed: {
      showKeyboard(){
        return this.option.show
      }
    },
  
    mounted() {
      // this.keyList = this.lowercase
      this.keyList = this.num;
    },
  
    methods: {
      tabHandle({ value = '' }) {
        console.log('这里执行----');
        if(value.indexOf('tab-num') > -1){
          console.log('------22222');
           this.status = 2
           //数字键盘数据
          this.keyList = this.num;
        }else if(value.indexOf('key-delete') > -1){
          this.emitValue('delete')
        }else if(value.indexOf('tab-blank') > -1){
          this.emitValue(' ')
        }else if(value.indexOf('tab-enter') > -1){
          this.emitValue('\n')
        }else if(value.indexOf('tab-point') > -1){
          this.emitValue('.')
        }else if(value.indexOf('tab-symbol') > -1){
          this.status = 3
        }else if(value.indexOf('tab-top') > -1){
          if(this.status === 0){
            this.status = 1
            this.keyList = this.uppercase
          }else{
            this.status = 0
            this.keyList = this.lowercase
          }
        }else if(value.indexOf('toggle-letters') > -1){
          this.status = 0
          console.log('小写子幕000');
          this.keyList = this.lowercase
        }
      },
  
      clickKey(event) {
        if(event.type === 'click' && this.equip) return
        let value = event.srcElement.innerText
        console.log("点击的元素",event.srcElement.innerText)
        console.log("value---",value)
        console.log("类名",event.srcElement.classList)
        // 当按键不为下面几个时，调用的是tabHandle方法。判断类名
        value && value !== '符' && value !== '·' && value !== '123' && value !== 'abc' ? this.emitValue(value) : this.tabHandle(event.srcElement.classList)
      },
  
      emitValue(key) {
        this.$emit('keyVal', key)
      },
  
      closeModal(e) {
        if (e.target !== this.option.sourceDom) {
          // this.showKeyboard = false
          this.$emit('close', false)
        }
      }
    }
  }
  </script>
  <style scoped lang="less">
  .keyboard {
    // width: 20%;
    // margin: 0 auto;
    // font-size: 18px;
    // border-radius: 2px;
    // padding-top: 0.5em;
    // background-color: #e5e6e8;
    // user-select: none;
    // position: fixed;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);


    position:absolute;
    left:24px;
    top:70px;  // 24 + 14+ 32

    width: 48%;
    margin: 0 auto;
    font-size: 18px;
    border-radius: 2px;
    padding-top: 0.5em;
    background-color: #e5e6e8;
    user-select: none;




    z-index: 999;
    pointer-events: auto;
    p {
      width: 95%;
      margin: 0 auto;
      height: 45px;
      margin-bottom: 0.5em;
      display: flex;
      display: -webkit-box;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      i {
        display: block;
        margin: 0 1%;
        height: 45px;
        line-height: 45px;
        font-style: normal;
        font-size: 24px;
        border-radius: 3px;
        width: 44px;
        background-color: #fff;
        text-align: center;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        -webkit-box-flex: 1;
        &:active {
          background-color: darken(#ccc, 10%);
        }
      }
      .tab-top {
        width: 50px;
        margin: 0 1%;
        background: #cccdd0;
        color: #fff;
        font-size: 24px;
      }
      .key-delete {
        width: 50px;
        margin: 0 1%;
        color: #827f7f;
        background: #d7d7d8;
      }
      .tab-num {
        font-size: 18px;
        background: #dedede;
        color: #5a5959;
      }
      .tab-point {
        width: 20px;
      }
      .tab-blank {
        width: 80px;
        font-size: 12px;
        padding: 0 15px;
        color: #5a5959;
        line-height: 60px;
      }
      .tab-symbol {
        width: 20px;
        font-size: 18px;
      }
      .tab-enter {
        font-size: 30px;
        line-height: 54px;
      }
      // &:nth-child(2) {
      //   width: 88%;
      // }
    }
  }
  .keyboard p[data-v-6d928a77]:nth-child(2) {
    width: 34%;
  }
  // .keyboard p[data-v-6d928a77]{
  //   width: 95%;
  // }
  </style>
  